<template>
  <view class="container">
    <!-- #ifndef MP -->
    <view class="main_box" @tap="getAddressList">
      <view class="main_box_left">
        <image src="/static/my/wechat.png"></image>
        <text>获取微信地址</text>
      </view>
      <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
    </view>
    <!-- #endif -->
    <view class="main" v-for="(item,index) in list" :key="index">
      <view class="main_left">
        <view class="main_left_head">
          <view class="main_name">
            张三
          </view>
          <view class="main_phone">
            18932140000
          </view>
          <uv-tags plain size="mini" text="默认"></uv-tags>
        </view>
        <view class="main_left_footer">
          北京市北京市东城区11号
        </view>
      </view>
      <image src="/static/my/add_edit.png" mode=""></image>
    </view>
    <uv-modal ref="modalRef" content='“知识区”需要访问 你的收货地址' showCancelButton @confirm="modalConfirm" confirmText="是"
      cancel-text="否"></uv-modal>
    <button class="btn flex-center" @tap="gotoEdit">新增地址</button>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const modalRef = ref();
  const list = ref([{}, {}])
  const addressInfo = ref()
  const getAddressList = () => {
    modalRef.value.open()
  }
  const gotoEdit = () => {
    uni.navigateTo({
      url: './edit'
    })
  }
  const modalConfirm = () => {
    uni.chooseAddress({
      success: (res) => {
        addressInfo.value = res
      }
    })
  }
</script>

<style lang="less" scoped>
  .container {
    background-color: #f4f4f4;
    height: 100%;
    padding-top: 20rpx;

    .main_box {
      width: 750rpx;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
      box-sizing: border-box;
      background-color: #fff;
      font-size: 28rpx;
      color: #333333;
      border-bottom: 1rpx solid rgba(#000, .1);

      &_left {
        display: flex;
        align-items: center;

        image {
          width: 48rpx;
          height: 40rpx;
          margin-right: 15rpx;
        }
      }

      &:active {
        background-color: #fafafa;
      }
    }

    .main {
      width: 750rpx;
      height: 120rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
      box-sizing: border-box;
      background-color: #fff;
      font-size: 28rpx;
      color: #333333;
      border-bottom: 1rpx solid rgba(#000, .1);

      &:last-child {
        border-bottom: 0;
      }

      &_left {
        &_head {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          color: #333333;

          .main_phone {
            font-size: 26rpx;
            color: #666666;
            margin: 0 20rpx 0 40rpx;
          }
        }

        &_footer {
          font-size: 26rpx;
          color: #333333;
          margin-top: 20rpx;
        }
      }

      image {
        width: 40rpx;
        height: 38rpx;
      }
    }

    .btn {
      position: fixed;
      bottom: 100rpx;
      left: 0;
      right: 0;
      margin: auto;
      width: 560rpx;
      height: 68rpx;
      background: #228CFE;
      box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 34rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
</style>